import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, Tag } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import type { SelectProps } from 'antd';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

/**
 * 新闻撰写功能
 * 根据关键信息自动生成符合专业规范的新闻稿
 */
const NewsWritingPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [newsContent, setNewsContent] = useState('');
  const [keyPoints, setKeyPoints] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [tourVisible, setTourVisible] = useState<boolean>(false);

  // 创建ref引用
  const eventTitleRef = useRef<HTMLDivElement>(null);
  const eventOverviewRef = useRef<HTMLDivElement>(null);
  const keyPointsRef = useRef<HTMLDivElement>(null);
  const newsTypeRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const newsResultRef = useRef<HTMLDivElement>(null);

  // 组织ref引用
  const tourRefs = {
    eventTitle: eventTitleRef,
    eventOverview: eventOverviewRef,
    keyPoints: keyPointsRef,
    newsType: newsTypeRef,
    generateButton: generateButtonRef,
    newsResult: newsResultRef
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'eventTitle',
      title: '输入事件标题',
      description: '请输入新闻事件的标题',
    },
    {
      key: 'eventOverview',
      title: '填写事件概述',
      description: '简要描述事件的背景和主要内容',
    },
    {
      key: 'keyPoints',
      title: '添加关键信息点',
      description: '输入关键信息点并按回车添加，至少添加一个以生成新闻稿',
    },
    {
      key: 'newsType',
      title: '选择新闻类型',
      description: '选择适合的新闻类型，不同类型会有不同的表达方式',
    },
    {
      key: 'generateButton',
      title: '生成新闻稿',
      description: '点击此按钮开始AI新闻稿生成过程',
    },
    {
      key: 'newsResult',
      title: '查看新闻稿',
      description: '生成完成后，您可以在此处查看、复制或下载新闻稿',
    },
  ];

  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 新闻类型选项
  const newsTypes = [
    { value: 'comprehensive', label: '综合新闻' },
    { value: 'tech', label: '科技新闻' },
    { value: 'business', label: '商业新闻' },
    { value: 'education', label: '教育新闻' },
  ];

  // 处理表单提交，生成新闻稿
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const eventTitle = values.eventTitle || '';
      const eventTime = values.eventTime || '';
      const eventLocation = values.eventLocation || '';
      const newsType = values.newsType || 'comprehensive';
      const eventOverview = values.eventOverview || '';

      // 检查必要输入
      if (!eventTitle.trim() || keyPoints.length === 0) {
        message.warning('请至少填写事件标题和添加一个关键信息点');
        return;
      }

      setLoading(true);
      setNewsContent('');

      // 模拟API调用延迟
      setTimeout(() => {
        // 生成新闻稿内容
        const news = generateNews(
          eventTitle,
          eventTime,
          eventLocation,
          eventOverview,
          keyPoints,
          newsType
        );
        setNewsContent(news);
        setLoading(false);
        message.success('新闻稿生成成功！');
      }, 2500);
    } catch (error) {
      setLoading(false);
      message.error('生成失败，请重试');
    }
  };

  // 生成新闻稿内容
  const generateNews = (
    title: string,
    time: string,
    location: string,
    overview: string,
    points: string[],
    type: string
  ): string => {
    // 这里是模拟新闻生成逻辑，实际应用中应该调用AI模型
    let result = '';

    // 新闻标题
    result += `${title}\n\n`;

    // 新闻导语（根据新闻类型调整）
    switch (type) {
      case 'tech':
        result += `本报记者 ${new Date().toLocaleDateString()} 报道：${overview}近日，${title}引起了业界广泛关注。该事件${time ? `于${time}` : ''}${location ? `在${location}` : ''}举行，吸引了众多专业人士参与。\n\n`;
        break;
      case 'business':
        result += `财经记者 ${new Date().toLocaleDateString()} 报道：${overview}${title}成为近期市场焦点。该事件${time ? `于${time}` : ''}${location ? `在${location}` : ''}启动，对行业格局产生深远影响。\n\n`;
        break;
      case 'education':
        result += `教育专栏 ${new Date().toLocaleDateString()} 讯：${overview}${title}在教育界引发热议。${time ? `${time}` : ''}${location ? `在${location}` : ''}举办的这一活动，为教育发展提供了新思路。\n\n`;
        break;
      case 'comprehensive':
      default:
        result += `${title}${time ? `（${time}）` : ''}${location ? ` ${location}` : ''}电（记者 综合报道）：${overview}\n\n`;
        break;
    }

    // 关键信息点展开
    points.forEach((point, index) => {
      // 根据新闻类型调整段落风格
      if (type === 'tech') {
        result += `值得注意的是，${point}。这一突破将有望推动相关技术领域的发展，为产业升级带来新机遇。\n\n`;
      } else if (type === 'business') {
        result += `according to，${point}。业内专家分析认为，此举将对市场竞争格局产生重要影响，相关企业需密切关注政策和市场变化。\n\n`;
      } else if (type === 'education') {
        result += `活动中提到，${point}。教育专家表示，这一理念的推广将有助于提升教育质量，促进学生全面发展。\n\n`;
      } else {
        result += `according to，${point}。这一信息的披露引发了广泛讨论，各方对此表达了不同看法。\n\n`;
      }
    });

    // 新闻结尾
    if (type === 'tech') {
      result += `展望未来，${title}相关技术的发展前景广阔。业内人士普遍认为，随着研发的深入，这项技术将在更多领域得到应用，为人们的生活和工作带来便利。`;
    } else if (type === 'business') {
      result += `对于${title}的后续发展，市场将持续关注。分析师预测，这一事件可能成为行业发展的重要转折点，相关概念股有望迎来投资机会。`;
    } else if (type === 'education') {
      result += `此次${title}活动的成功举办，为教育改革提供了实践经验。与会者纷纷表示，将把活动中的收获应用到实际工作中，推动教育事业的创新发展。`;
    } else {
      result += `目前，${title}仍在持续发展中。本报将继续关注事件的最新进展，为读者带来及时报道。`;
    }

    return result;
  };

  // 复制新闻内容
  const handleCopy = () => {
    if (!newsContent) {
      message.warning('没有可复制的内容');
      return;
    }

    navigator.clipboard.writeText(newsContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  // 下载新闻内容
  const handleDownload = () => {
    if (!newsContent) {
      message.warning('没有可下载的内容');
      return;
    }

    const blob = new Blob([newsContent], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '新闻稿.txt';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    message.success('内容已下载');
  };

  // 添加关键信息点
  const handleAddKeyPoint = () => {
    if (inputValue && !keyPoints.includes(inputValue)) {
      setKeyPoints([...keyPoints, inputValue]);
      setInputValue('');
    }
  };

  // 删除关键信息点
  const handleRemoveKeyPoint = (removedTag: string) => {
    setKeyPoints(keyPoints.filter(tag => tag !== removedTag));
  };

  // 处理输入框变化
  const handleInputChange: SelectProps['onChange'] = (value) => {
    setInputValue(value);
  };

  // 处理回车键添加
  const handleInputPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleAddKeyPoint();
    }
  };

  // 清空所有内容
  const handleClear = () => {
    form.resetFields();
    setNewsContent('');
    setKeyPoints([]);
    setInputValue('');
  };

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Typography>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Title level={1}>新闻撰写 <TourGuideButton onClick={showTour} /></Title>
          </div>
          <Paragraph>
            输入事件信息和关键要点，AI将自动生成专业的新闻稿。
          </Paragraph>
        </Typography>

        <Row gutter={[16, 16]}>
          <Col xs={24} lg={12}>
            <Card title="新闻信息设置" size="small">
              <Form
                form={form}
                layout="vertical"
              >
                <Form.Item
                  label="事件标题"
                  name="eventTitle"
                  rules={[{ required: true, message: '请输入事件标题' }]}
                >
                  <div ref={eventTitleRef}>
                    <Input
                      placeholder="请输入新闻事件的标题"
                      maxLength={100}
                      showCount
                    />
                  </div>
                </Form.Item>

                <Form.Item
                  label="事件时间"
                  name="eventTime"
                >
                  <Input
                    placeholder="请输入事件发生的时间，如：2023年10月1日"
                    maxLength={50}
                  />
                </Form.Item>

                <Form.Item
                  label="事件地点"
                  name="eventLocation"
                >
                  <Input
                    placeholder="请输入事件发生的地点，如：北京市"
                    maxLength={50}
                  />
                </Form.Item>

                <Form.Item
                  label="事件概述"
                  name="eventOverview"
                >
                  <div ref={eventOverviewRef}>
                    <TextArea
                      rows={3}
                      placeholder="请简要描述事件的背景和主要内容"
                      maxLength={200}
                      showCount
                    />
                  </div>
                </Form.Item>

                <Form.Item
                  label="新闻类型"
                  name="newsType"
                  initialValue="comprehensive"
                >
                  <div ref={newsTypeRef}>
                    <Select style={{ width: '100%' }}>
                      {newsTypes.map(type => (
                        <Option key={type.value} value={type.value}>
                          {type.label}
                        </Option>
                      ))}
                    </Select>
                  </div>
                </Form.Item>

                <Form.Item label="关键信息点">
                  <div ref={keyPointsRef}>
                    <div>
                      <Input
                        value={inputValue}
                        onChange={(e) => handleInputChange(e.target.value)}
                        onPressEnter={handleInputPress}
                        placeholder="输入关键信息点，按回车添加"
                        style={{ width: '80%', marginRight: '8px' }}
                      />
                      <Button type="primary" onClick={handleAddKeyPoint}>
                        添加
                      </Button>
                    </div>
                    <div style={{ marginTop: '8px' }}>
                      {keyPoints.map((tag) => (
                        <Tag
                          key={tag}
                          closable
                          onClose={() => handleRemoveKeyPoint(tag)}
                          style={{ marginRight: '8px', marginBottom: '8px' }}
                        >
                          {tag}
                        </Tag>
                      ))}
                    </div>
                    <p style={{ color: '#999', fontSize: '12px', marginTop: '8px' }}>
                      提示：至少添加一个关键信息点，可添加多个以丰富新闻内容
                    </p>
                  </div>
                </Form.Item>

                <Row gutter={[8, 8]}>
                  <Col span={12}>
                    <div ref={generateButtonRef}>
                      <Button
                        type="primary"
                        onClick={handleSubmit}
                        loading={loading}
                        block
                      >
                        {loading ? '生成中...' : '生成新闻稿'}
                      </Button>
                    </div>
                  </Col>
                  <Col span={12}>
                    <Button
                      onClick={handleClear}
                      block
                    >
                      清空内容
                    </Button>
                  </Col>
                </Row>
              </Form>
            </Card>
          </Col>

          <Col xs={24} lg={12}>
            <Card title="生成的新闻稿" size="small" ref={newsResultRef}>
              {loading ? (
                <div style={{ textAlign: 'center', padding: '60px 0' }}>
                  <Spin size="large" />
                  <p style={{ marginTop: '16px' }}>正在生成新闻稿，请稍候...</p>
                </div>
              ) : newsContent ? (
                <div>
                  <div style={{
                    backgroundColor: '#f5f5f5',
                    padding: '16px',
                    borderRadius: '4px',
                    minHeight: '400px',
                    whiteSpace: 'pre-wrap',
                    wordBreak: 'break-word'
                  }}>
                    {newsContent}
                  </div>
                  <div style={{ marginTop: '16px', textAlign: 'right' }}>
                    <Button
                      type="primary"
                      icon={<CopyOutlined />}
                      onClick={handleCopy}
                      style={{ marginRight: '8px' }}
                    >
                      复制内容
                    </Button>
                    <Button
                      icon={<DownloadOutlined />}
                      onClick={handleDownload}
                    >
                      下载新闻稿
                    </Button>
                  </div>
                </div>
              ) : (
                <div style={{ textAlign: 'center', padding: '60px 0', color: '#999' }}>
                  新闻稿将显示在这里
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
};

export default NewsWritingPage;